<template xmlns="http://www.w3.org/1999/html">
  <div class="resetting-pwd">
    <div class="resetting-pwd_title">
      <span class="circle"></span>
      <span>重置密码</span>
    </div>
    <div class="resetting-pwd_tip">
      验证码已经发送至 <span class="resetting-pwd_tip-phone">{{ props.mobile }}</span>
    </div>
    <a-form
      ref="formRef"
      :label-col-style="{ display: 'none' }"
      :wrapper-col-style="{ flex: 1 }"
      :model="form"
      :rules="rules"
      @submit="resetPwdSubmit"
    >
      <div class="code-container">
        <a-form-item class="code-input" field="smsCode" style="margin-bottom: 15px">
          <a-input placeholder="请输入验证码" v-model.trim="form.smsCode" :max-length="4" />
        </a-form-item>
        <a-button class="code-btn" @click="handelGetCode" :disabled="isGetCode">{{ codeBtn }}</a-button>
      </div>
      <a-form-item field="password" style="margin-bottom: 15px">
        <a-input-password placeholder="请输入新密码" v-model.trim="form.password" />
      </a-form-item>
      <a-form-item field="checkPassword" style="margin-bottom: 0">
        <a-input-password placeholder="请输入确认密码" v-model.trim="form.checkPassword" />
      </a-form-item>
      <div class="resetting-pwd_tip pwd-tip">密码至少6位数，支持数字、字母和除空格外的特殊字符</div>
      <a-button class="login-btn" html-type="submit">提交</a-button>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { getVerifyCode, resetPassword } from "@/apis";
import { Message } from "@arco-design/web-vue";
import _ from "lodash"
import * as Regexp from "@/utils/regexp";


const emit = defineEmits(["resetPwdResult"]);
const props = defineProps({
  mobile: {
    type: String,
    default: ""
  }
});

const form = ref({
  mobile: props.mobile,
  password: "",
  checkPassword: "",
  smsCode: ""
});
const validatorPassword = (value: any, callback:Function) => {
  // const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
  const passwordRegex = /^[0-9a-zA-Z\W_].{5,}$/;
  if (value === "") {
    return callback("请输入密码");
  } else if(value?.length < 6){
    return callback("密码至少6位数");
  }
  else if (!passwordRegex.test(value)) {
    return callback("密码至少6位数，支持数字、字母和除空格外的特殊字符");
  }
};
const validatorCheckPassword = (value: any, callback:Function) => {
  if (value === "") {
    return callback("请再次输入密码");
  } else if (value !== form.value.password) {
    return callback("两次输入密码不一致");
  }
};
const rules = {
  smsCode: [
      { required: true, message: "请输入验证码" },
     { match: Regexp.Code_4, message: "请输入4位数字验证码" }
  ],
  password: [
    { required: true, message: "新密码至少6位数",minLength:6 },
    { validator:validatorPassword }
  ],
  checkPassword: [
    { required: true, message: "请再次输入密码",minLength:6  },
    {validator: validatorCheckPassword}
  ]
};

/**
 * 60s计时
 */
const codeBtn = ref("获取验证码");
const isGetCode = ref(false);
let timer:any = null;
let number = 60;
const resetCode = () => {
  codeBtn.value = `${number}s后重新发送`;
  isGetCode.value = true;
  timer && clearInterval(timer);
  timer = setInterval(() => {
    number--;
    codeBtn.value = `${number}s后重新发送`;
    if (number <= 0) {
      clearInterval(timer);
      codeBtn.value = "重新发送";
      number = 60;
      isGetCode.value = false;
    }
  }, 1000);
};

/**
 * @desc 验证码
 */
const getCode = async () => {
  await getVerifyCode({ mobile:props.mobile });
  resetCode();
};
const handelGetCode = _.debounce(getCode, 500)

/**
 * 重置密码
 */
const formRef = ref();
const resetPwdResult = async () => {
  try {
    const valid = await formRef.value?.validate();
    if (valid) return;
    await resetPassword(form.value);
    Message.success("重置密码成功");
    emit("resetPwdResult", true);
  } catch (error) {
    emit("resetPwdResult", false);
  }
};
const resetPwdSubmit = _.debounce(resetPwdResult, 500)

resetCode();

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped lang="scss">
@import "index.scss";
</style>
